<template>
	<div class="select-size-container">
		<div class="select-trigger" @click="togglePanel">
			<div class="selected-text">
				{{ selectedText }}
			</div>
			<div class="arrow" :class="{ 'is-reverse': isPanelVisible }">▼</div>
		</div>

		<div v-show="isPanelVisible" class="select-panel">
			<div class="panel-content">
				<div class="category" v-for="category in options" :key="category.name">
					<div class="category-name">{{ category.name }}</div>
					<div
						class="size-option"
						v-for="size in category.sizes"
						:key="size"
						:class="{ active: selectedSize === size }"
						@click="selectSize(size)">
						{{ size }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';

// 定义 props
const props = defineProps<{
	selectValue: string; // 选中的尺寸
}>();

// 定义 emits
const emit = defineEmits<{
	change: [value: string];
}>();

// 尺寸选项数据
const options = [
	{
		name: 'PC端',
		sizes: ['1920*1080', '1600*900', '1366*768', '1280*720', '1200*800', '1024*768']
	}
];

// 状态管理
const isPanelVisible = ref(false);
const selectedSize = ref<string>(props.selectValue);

// 计算显示文本
const selectedText = computed(() => {
	return selectedSize.value;
});

// 切换面板显示状态
const togglePanel = () => {
	isPanelVisible.value = !isPanelVisible.value;
};

// 选择尺寸
const selectSize = (size: string) => {
	selectedSize.value = size;
	// isPanelVisible.value = false;
};

// 点击外部关闭面板
const handleClickOutside = (e: MouseEvent) => {
	const container = document.querySelector('.select-size-container');
	if (container && !container.contains(e.target as Node)) {
		isPanelVisible.value = false;
		emit('change', selectedSize.value);
	}
};

// 生命周期钩子
onMounted(() => {
	document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
	document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped lang="scss">
.select-size-container {
	width: 120px;
	position: relative;
}

.select-trigger {
	height: 30px;
	padding: 0 8px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	background: #fff;
	transition: all 0.3s;

	&:hover {
		border-color: #1890ff;
	}

	.selected-text {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #666;
	}

	.arrow {
		font-size: 12px;
		color: #999;
		transition: transform 0.3s;

		&.is-reverse {
			transform: rotate(180deg);
		}
	}
}

.select-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 1000;

	.panel-content {
		max-height: 300px;
		overflow-y: auto;
		padding: 8px;
	}

	.category {
		margin-bottom: 8px;

		.category-name {
			font-weight: bold;
			margin-bottom: 4px;
		}

		.size-option {
			padding: 6px 8px;
			cursor: pointer;
			transition: all 0.3s;
			border-radius: 4px;

			&:hover {
				background-color: #f5f5f5;
			}

			&.active {
				color: #1890ff;
				background-color: #e6f7ff;
			}
		}
	}
}
</style>
